<template>
  <q-toolbar color="tertiary">
    <q-toolbar-title>
      {{ info.title }}
      <div slot="subtitle">Running on Quasar v{{$q.version}}</div>
    </q-toolbar-title>
    <div class="col"></div>
    <transition name="slide-fade">
      <tre-search v-show="!showButton" class="search-bar"></tre-search>
    </transition>
    <transition name="slide-fade">
      <div class="buttons" v-show="showButton">
        <q-btn flat>游戏</q-btn>
        <q-btn flat>动漫</q-btn>
        <q-btn flat>自定义</q-btn>
        <q-btn flat>设置</q-btn>
      </div>
    </transition>
    <q-btn flat @click="newRight($event)">新窗口</q-btn>
    <q-btn flat @click="changeButton">
      <q-icon name="menu" />
    </q-btn>
  </q-toolbar>
</template>

<script>
import {
  QToolbar,
  QToolbarTitle,
  QBtn,
  QIcon
} from 'quasar'
import treSearch from './treSearch'
import router from '../router'
export default {
  name: 'tre-toolbar',
  components: {
    QToolbar,
    QToolbarTitle,
    QBtn,
    QIcon,
    treSearch
  },
  data () {
    return {
      showButton: true
    }
  },
  methods: {
    changeButton: function () {
      this.showButton = !this.showButton
    },
    newRight: function () {
      if (event) event.preventDefault()
      router.push('right')
    }
  },
  props: {
    info: {
      type: Object,
      default: {
        title: "Tre's Pokédex",
        url: 'testURL'
      },
      title: String,
      utl: String
    },
    showInfo: {
      type: Boolean,
      default: false
    },
    imgURL: {
      type: String,
      default: 'imgURL'
    }
  }
}
</script>

<style>
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
.search-bar {
  position: absolute;
  margin: 0 0 0 53%;
}
.buttons {
  position: absolute;
  margin: 0 0 0 53%;
}
</style>